<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vaeThink</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">
</head>
<body>
<div style="width:800px;margin: 100px auto;">
  <div class="layui-layout layui-layout-admin">
  <div class="layui-header layui-bg-cyan">
    <div class="layui-logo" style="color: #fff">vaeThink 安装引导</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">v{:VAE_VERSION}</li>
  </div>
  <div style="border:1px solid #eee;padding:20px;line-height: 25px;">
    <h3>数据库配置</h3><br>
    <form class="layui-form" action="" id="form">
      <div class="layui-form-item">
        <label class="layui-form-label">数据库类型</label>
        <div class="layui-input-inline">
          <input type="text" name="DB_TYPE" required  lay-verify="required" autocomplete="off" class="layui-input" value="mysql" disabled="disabled">
        </div>
        <div class="layui-form-mid layui-word-aux">固定为mysql</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">数据库地址</label>
        <div class="layui-input-inline">
          <input type="text" name="DB_HOST" required  lay-verify="required" autocomplete="off" class="layui-input" value="127.0.0.1">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">数据库端口</label>
        <div class="layui-input-inline">
          <input type="text" name="DB_PORT" required  lay-verify="required" autocomplete="off" class="layui-input" value="3306">
        </div>
        <div class="layui-form-mid layui-word-aux">数据库端口，一般为3306</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
          <input type="text" name="DB_USER" required  lay-verify="required" autocomplete="off" class="layui-input" value="root">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
          <input type="password" name="DB_PWD" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">数据库名</label>
        <div class="layui-input-inline">
          <input type="text" name="DB_NAME" required  lay-verify="required" autocomplete="off" class="layui-input" value="vaethink">
        </div>
        <div class="layui-form-mid layui-word-aux">不能有"-"等特殊符号</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">表前缀</label>
        <div class="layui-input-inline">
          <input type="text" name="DB_PREFIX" required  lay-verify="required" autocomplete="off" class="layui-input" value="vae_">
        </div>
        <div class="layui-form-mid layui-word-aux">建议使用默认，同一个数据库安装多个vaeThink时需更改，否则会覆盖</div>
      </div>

      <hr>
      <h3>管理员配置</h3><br>
      <div class="layui-form-item">
        <label class="layui-form-label">账户</label>
        <div class="layui-input-block" style="max-width: 500px;">
          <input type="text" name="username" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
          <input type="password" name="password" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
          <input type="password" name="password_confirm" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
      <br>

      <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo" style="display: none;" id="progress">
        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
      </div>

      <div class="layui-form-item">
        <div style="margin:10px auto;width: 190px;">
          <a href="{:url('install/index/step2')}" class="layui-btn layui-bg-cyan">上一步</a>
          <button class="layui-btn layui-bg-cyan" lay-submit="" lay-filter="formDemo">创建数据</button>
        </div>
      </div>
    </form>
    <div style="display: none;text-align: center;" id="complete">
      <h1>安装完成!</h1><br><br><br>
      <a href="/" class="layui-btn layui-bg-cyan">访问API模块</a>
      <a href="{:url('admin/index/index')}" class="layui-btn layui-bg-cyan">访问后台</a>
    </div>
  </div>
</div>
</div>     
          
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['element','jquery','layer','form'], function(){
  var $ = layui.jquery,layer = layui.layer,form = layui.form,element = layui.element;

  var n = 0;

  //监听提交
  form.on('submit(formDemo)', function(data){
    $('#progress').css('display','block');
    var timer = setInterval(function(){
      n = n + Math.random()*10|0;  
      if(n>99){
        n = 99;
        clearInterval(timer);
      }
      element.progress('demo', n+'%');
    }, 30+Math.random()*100);

    $.ajax({
      url:"{:url('install/index/createData')}",
      type:"post",
      data:data.field,
      beforeSend: function () {   
          // 禁用按钮防止重复提交
          $("#formDemo").attr({ disabled: "disabled" });
          $('#formDemo').html('创建中...');
      },
      success:function(res){
        if(res.code==0){
          $('#progress').css('display','none');
          layer.msg(res.msg);
        } else {
          if(n==99){
            element.progress('demo', 100+'%');
            $('#form').hide();
            $('#complete').show();
            return false;
          } else if(n<99) {
            var ref = setInterval(function(){
              if(n==99){
                clearInterval(ref);
                element.progress('demo', 100+'%');
                $('#form').hide();
                $('#complete').show();
              }
            },500)
          }
        }
      },
      complete: function () {
          $("#formDemo").removeAttr("disabled");
          $('#formDemo').html('提交');
      }
    })
    return false;
  });

});
</script>

</body>
</html>